<template>
  <div>
    <TreeGrid
      :items='data'
      :columns='columns'
      @handleRemoteSearch="handleRemoteSearch"
      @handleAdd="handleAddPermission"
      @on-row-click='rowClick'
    />
    <Handle
      :handleType="title"
      :showModal="showModal"
      :permission="permission"
      :formData="formData"
      @changeVisible="changeVisible"
      @handleSubmit="handleSubmit"/>

    <DeleteModal
      :modalVisible="modalVisible"
      :modalLoading="modalLoading"
      :deleteId="deleteId"
      @handleDelete="handleDelete"
      @handleChangeVisible="handleChangeVisible"/>

  </div>
</template>
<script>
  import DeleteModal from '_c/delete-modal'
  import TreeGrid from './components/permission-tree/TreeGrid'
  import Handle from './components/permission-handle'
  import {permission, topClass, addPermission, editPermission, deletePermission} from '@/api/permission'
  import Bus from '@/bus'

  export default {
    components: {
      TreeGrid,
      DeleteModal,
      Handle
    },
    data() {
      return {
        title: '新增权限',
        modalVisible: false,
        modalLoading: false,
        deleteId: 0,
        showModal: false,
        permission: [],
        formData: {},
        columns: [
          {
            type: 'selection',
            width: '20'
          },
          {
            title: '权限名称',
            key: 'display_name',
            sortable: true,
            minWidth: '150',
          },
          {
            title: '唯一键',
            key: 'name',
            minWidth: '150',
          },
          {
            title: '类型',
            key: 'type_name',
            minWidth: '150',
          },
          {
            title: '排序',
            key: 'sort',
            minWidth: '150',
          },
          {
            title: '创建时间',
            key: 'created_at',
            minWidth: '100',
          },
          {
            title: '更新时间',
            key: 'updated_at',
            minWidth: '100',
          },
          {
            title: '操作',
            type: 'action',
            width: '150',
            actions: [
              {
                text: '编辑',
                icon: 'ios-create',
                color: '#2D8CF0',
                action: 'edit',
              },
              {
                text: '添加子权限',
                icon: 'md-add-circle',
                color: '#F7784D',
                action: 'add'
              },
              {
                text: '删除',
                icon: 'md-trash',
                color: '#B14949',
                action: 'delete',
              }],
          }],
        data: []
      }
    },
    mounted() {
      Bus.$on('flashPermission', () => {
        this.flashPermission()
      })
      this.flashPermission()
    },
    methods: {
      rowClick(row, type) {
        if (type === 'edit') {
          this.handleEditPermission(row)
        } else if (type === 'add') {
          this.handleAddChildPermission(row)
        } else {
          this.handleDeletePermission(row.id)
        }
      },
      handleDeletePermission: function (id) {
        this.deleteId = id
        this.modalVisible = true
      },
      handleGetPermissions: function () {
        permission().then(res => {
          this.data = res.data
        })
      },
      handleGetTopClass: function () {
        topClass().then(res => {
          this.permission = res.data
        })
      },
      handleRemoteSearch: function (val) {
        Bus.$emit('flashPermission')
      },
      changeVisible: function (val) {
        this.showModal = val
      },
      handleSubmit: function (param) {
        const id = param.id || ''
        if (id) {
          const _data = {
            id: param.id,
            parent_id: param.parent_id,
            name: param.name,
            display_name: param.display_name,
            type: param.type,
            sort: param.sort,
          }
          editPermission(_data).then(res => {
            this.$Message.success(res.message)
            this.showModal = false
            Bus.$emit('flashPermission')
          })
        } else {
          addPermission(param).then(res => {
            this.$Message.success(res.message)
            this.showModal = false
            Bus.$emit('flashPermission')
          })
        }
      },
      handleAddPermission: function () {
        this.formData = {
          parent_id: 0,
          display_name: '',
          name: '',
          type: 1,
          sort: 0,
        }
        this.showModal = true
      },
      handleEditPermission: function (row) {
        this.formData = row
        this.showModal = true
        this.title = '编辑权限'
      },
      handleAddChildPermission: function (row) {
        this.formData = {
          parent_id: row.id,
          display_name: '',
          name: '',
          type: 1,
          sort: 0,
        }
        this.showModal = true
      },
      flashPermission: function () {
        this.handleGetPermissions()
        this.handleGetTopClass()
      },
      handleDelete: function (id) {
        this.modalLoading = true
        deletePermission({id: id}).then(res => {
          this.$Message.success(res.message)
          Bus.$emit('flashPermission')
        })
        setTimeout(() => {
          this.modalLoading = false
          this.modalVisible = false
        }, 2000)

      },
      handleChangeVisible: function (value) {
        this.modalVisible = value
      },
    }
  }
</script>
